import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
import _ from 'lodash';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import List from '../../../components/list';

export default ({ data, status }) => {
  const valueStyle = !data.insuranceOrgId && { color: '#ccc' }
  const DATA = [
    {
      title: '所属机构',
      value: data.insuranceOrgName || '未加入机构',
      icon: <FontAwesome name="sitemap" size={20} color="#6666ff" />,
      valueStyle
    },
    {
      title: '职级',
      value: data.insuranceOrgPostName || '未加入机构',
      icon: <FontAwesome name="flag" size={20} color="#f00" />,
      valueStyle
    },
    {
      title: '工号',
      value: data.workerNo || '未加入机构',
      icon: <FontAwesome name="vcard" size={20} color="#ffbf00" />,
      valueStyle
    },
  ];
  const Right = () => {
    if (data.insuranceOrgId) {
      return null;
      /* 
      TODO 暂时不允许使用解绑机构功能
        return (
          <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }}>
            <FontAwesome name="ban" size={20} color="#f00" />
            <Text style={{ color: '#f00', marginLeft: 4 }}>解绑机构</Text>
          </TouchableOpacity>
        );
      */
    }
    if (!_.isEmpty(status)) {
      return <Text style={{ color: '#1a75ff', marginLeft: 4 }}>已申请加入 {status.insuranceOrgName}, 审核中...</Text>
    }
    return (
      <TouchableOpacity onPress={Actions.checkInstitution} style={{ flexDirection: 'row', alignItems: 'center' }}>
        <FontAwesome name="sign-in" size={20} color="#1a75ff" />
        <Text style={{ color: '#1a75ff', marginLeft: 4 }}>加入机构</Text>
      </TouchableOpacity>
    );
  }

  return (
    <List
      data={DATA}
      keyPrefix="institution"
      title="机构"
      titleRight={<Right />}
    />
  );
};